<template>
  <view class="page-login">

    <view class="login-top ">
      <view class="title">登录界面</view>
      <view class="text">My Login Interface</view>
    </view>

    <view class="login-form">
      <u-form ref="formRef" labelPosition="left" labelWidth="100" :model="form" :rules="rules">
        <u-form-item label="账号" prop="username" borderBottom ref="item1">
          <u-input v-model="form.username" border="none"></u-input>
        </u-form-item>
        <u-form-item label="密码" prop="password" borderBottom ref="item2">
          <u-input v-model="form.password" border="none"></u-input>
        </u-form-item>
      </u-form>
    </view>
    <view class="login-but ">
      <u-button shape="circle" throttleTime="500" loadingText="提交中" loadingMode="circle" :loading="loading" :disabled="loading"
        color="linear-gradient(to right, #6978f1, #8fb8fa)" customStyle="height: 90rpx; font-size: 32rpx;" @click="submit">登录</u-button>
    </view>
  </view>
</template>


<script lang="ts" setup>
import { onShow, onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/modules/user'
const userStore = useUserStore()
const login = (form: any) => userStore.login(form)

const loading = ref<boolean>(false)
const form: any = reactive({
  username: '闫小猪🐷',
  password: ''
})
const rules = reactive<any>({
  password: [
    { required: true, message: '密码为必填项', trigger: ['blur', 'change'] }
  ],
  username: [
    { required: true, message: '账号为必填项', trigger: ['blur', 'change'] }
  ]
})
const formRef = ref<any>(null)

const submit = () => {
  formRef.value
    .validate()
    .then(async (res) => {
      loading.value = true
      uni.reLaunch({ url: '/pages/index/index' })
      // await login(form)
      //   .then(() => uni.reLaunch({ url: '/pages/index/index' }))
      //   .catch((err) => {
      //     console.log('err', err)
      //     uni.$u.toast(err.message)
      //   })
      loading.value = false
    })
    .catch((errors) => {
      uni.$u.toast('校验失败')
    })
}
</script>


<style lang="scss" scoped>
.page-login {
  width: 100%;
  min-height: 100vh;
  background: url('http://qushen-file.oss-cn-beijing.aliyuncs.com/outsourcing-2023/yanbao-jingxian/upload/1693299788924login-bac.png')
    no-repeat;
  background-size: 100%;
  .login-top {
    padding-top: 130rpx;
    color: #fff;
    text-shadow: 4rpx 4rpx 20rpx rgba(0, 0, 0, 0.3);
    text-align: center;
    .title {
      font-size: 68rpx;
      font-weight: 400;
    }
    .text {
      margin-top: 12rpx;
      font-size: 32rpx;
      font-weight: 300;
    }
  }
  .login-form {
    padding: 260rpx 80rpx 80rpx;
  }
  .login-but {
    padding: 60rpx 160rpx 80rpx;
  }
}
</style>